<template>
  <div class="chatlist h_full">
    <el-form
      ref="queryform"
      :model="queryform"
      label-width="0"
      class="p-15 chatheader"
    >
      <div
        v-if="type == 1"
        class="f-14 oneheader flexcenter mb-12 c_primary commhover"
      >
        <img src="@/assets/images/j8wsb.png" alt="" class="img1" />
        <img src="@/assets/images/j8wsb-2.png" alt="" class="img2" />
        全部私聊消息
      </div>
      <template v-if="type == 1">
        <el-form-item label="" class="mb-6" prop="keyword">
          <el-input
            v-model="queryform.keyword"
            size="small"
            placeholder="好友昵称/姓名/手机号/备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="" class="mb-0">
          <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt' />
          <!-- <el-select
            v-model="queryform.group"
            size="small"
            placeholder="企微标签"
            class="w_full"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select> -->
        </el-form-item>
      </template>
      <template v-if="type == 2">
        <el-form-item label="" class="mb-6" prop="keyword">
          <el-input
            v-model="queryform.keyword"
            size="small"
            placeholder="群名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="" class="mb-0">
          <el-select
            v-model="queryform.group"
            size="small"
            placeholder="群标签"
            class="w_full"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </el-form>
    <div class="listbody">
      <div
        v-for="(item, index) in chatList"
        :key="index"
        class="chat-item p-12 w_full flex commhover"
        :class="{ active: activeItem&& activeItem.wxid == item.wxid }"
        @click="handleItem(item)"
      >
        <img :src="item.avatar" alt="" class="avatarbox" />
        <div class="chatinfo">
          <div class="textover f-14 c_000">{{ item.nickname }}</div>
          <div class="textover f-12 mt-2 c_f90" v-if="item.corp_name">
            @{{ item.corp_name }}
          </div>
        </div>
      </div>
      <div v-if="!chatList.length" class="flexcolumn aligncenter justifycenter">
        <img src="@/assets/images/empty1.png" alt="" class="emptyimg" />
        <div class="c_text3 f-14 mt-20">暂无聊天对象</div>
      </div>
    </div>
  </div>
</template>
<script>
// import ChatRight from './ChatRight.vue';
// import ChatleftHeader from "./components/ChatleftHeader.vue";
import MultipleSelect from '@/views/components/multipleSelect.vue'

export default {
  data() {
    return {
      queryform: {},
      activeItem: null,
      chatList: [],
      lableOpt:[
        {value:1,label:'客户等级',children:['一般','重要','核心']},
        {value:2,label:'客户等级2',children:['一般2','重要2','核心2']}
      ]
    };
  },
  // components: {
  //   ChatleftHeader,
  //   ChatRight,
  // },
  created() {
    console.log('------------ChatList---------')
    console.log('useritem:', this.useritem)
    this.getList();
  },
  props: {
    type: {
      default: 1,
    },
    useritem: {
      type: Object,
      default: null,
    },
  },
  components:{
    MultipleSelect
  },
  methods: {
    getList() {
      console.log("获取内容");
      this.chatList = [
        {
          wxid: "R:10814949724396927",
          nickname: "测试",
          avatar:
            "//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/5922867c1cbd03953b39d60d0ece5f33.png",
          corp_name: "",
        },
        {
          wxid: "1688855537489444",
          nickname: "肖洁",
          avatar:
            "//wework.qpic.cn/wwpic3az/646139_qhEaA8U0R8ya8Uz_1702871041/0",
          corp_name: "志新",
        },
      ]
      this.handleItem(this.chatList[0])
    },

    handleItem(item) {
      this.activeItem = item;
      this.$emit('selectFreiend',item)
    },
  },
};
</script>
<style lang="scss" scoped>
.chatlist {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
.chatheader {
  border-bottom: 1px solid #d9d9d9;
}
.chat-item {
  border-radius: 4px;
  height: 64px;
  .imore {
    display: none;
  }

  &:hover {
    background-color: #f0f0f0;
    .imore {
      display: inline-block;
    }
  }
  &.active {
    background-color: #e9e9e9;
  }

  .avatarbox {
    width: 40px;
    height: 40px;
  }
  .chatinfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 0 12px;
  }
  .elipisis {
    display: inline-block;
    max-width: 50%;
  }
  .chatdate {
    text-align: right;
  }
}
.listbody {
  flex: 1;
  overflow-y: auto;
}
.emptyimg {
  width: 90px;
  height: 90px;
}
.oneheader {
  height: 36px;
  border: 1px solid #3370ff;
  background-color: rgba(51, 112, 255, 0.1);
  transition: all 0.5s;
  img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }
  .img1 {
    display: inline-block;
  }
  .img2 {
    display: none;
  }
  &:hover {
    background-color: #3370ff;
    color: #fff !important;
    .img1 {
      display: none;
    }
    .img2 {
      display: inline-block;
    }
  }
}
</style>
